<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/home.css">
    <script src="/js/jquery.js"></script>
</head>
<body>
     <!-- nav>div>(h1{阅读})+ul>(li>a{登录})+li>a{注册} -->
     <nav id="nav">
        <div>
            <h1>阅读</h1>
            <ul>
                <li><a href="">登录</a></li>
                <li><a href="">注册</a></li>
            </ul>
        </div>
    </nav>
    <main>
        <nav>
            <ul class="nav_ul">
                <li class="action">全部</li>
            </ul>
        </nav>
        <div>
            <ul class="content">
                
            </ul>
        </div>
    </main>
    <script>
        // 1.页面加载后有两个请求,
        // 获取分类列表 (获取全部分类)
        // 获取页面列表数据 (tab,0-20条数据page)
        // 2.发送一个get请求到php页面,获取列表数据
        // 2.1(然后去PHP页面响应请求)
        $.get("/php/tab.php",function(res){
            // 3.获取的数据,确定是一个json数据后,转换成json对象
            // console.log(res);
            var data = JSON.parse(res);
            // 4.渲染导航列表
            for(var i = 0;i < data.length;i++){
                var li = document.createElement("li");
                li.innerHTML = data[i].type;
                li.index = data[i].id;
                document.querySelector(".nav_ul").appendChild(li);
                // $(".nav_ul").append(`<li aaa='${data[i].id}'>${data[i].type}</li>`);
            }

        })
        
        homeList("0",1);
        function homeList(t,p){
            // 5.发送一个get请求获取页面列表数据
            // (自己编写php页面)
            $.get("/php/homeList.php",{tab:t,page:p},function(res){
                // console.log(res);
                var data = JSON.parse(res);
                // console.log(data[0]);
                var str = "";
                for(var i = 0;i < data.length;i++){
                str += `
                <li>
                    <a href="/view/details.html?id=${data[i].id}">
                        <img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF" alt="">
                        <h3>${data[i].title}</h3>
                        <p>作者: ${data[i].author}</p>
                        <p>浏览量: ${data[i].play_time}</p>
                        <p>标签: ${data[i].labels}</p>
                    </a>
                    </li>
                `;
                }
                $(".content").html(str);
            })
        }


        // 6.点击tab切换
        // 6.1给每个li添加添加事件 动态添加的标签需要使用事件监听添加事件
        $(".nav_ul").on("click","li",function(){
            // console.log(this.index);
            var id = !this.index ? '0' : this.index;
            // console.log(id);
            $(this).addClass("action").siblings().removeClass("action");
            homeList(id,1);
        })


    </script>
</body>
</html>